<template>
	<view class="flex-col flex-auto group_2">
		<u-navbar title="访客列表" :title-size="35" title-color="#ffffff" back-icon-color="#ffffff" :title-bold="true"
			:immersive="true" :background="background" :border-bottom="false"></u-navbar>
		<view class="flex-row justify-between items-center section_2">
			<text class="text_2">{{shop_name}}</text>
		</view>
		<!-- 选择器 -->
		<u-select v-model="slideShow" :default-value="dafautValue" :mode="mode" class="selectware-slide"
			:list="salesList" @confirm="selectTrue"></u-select>
		<view class="flex-col justify-start relative section_3">
			<view style="width: 360px; font-size: 15px; margin: auto;">
				<view style="margin-left: 10px;">
					<view class="ware-select" style="width: 100%; height: 30px; font-size: 14px;"
						@click="selectarea('salesman')">
						{{ salesmantext || '请选择筛选方式'}}<u-icon name="arrow-down-fill" style="margin-left: 10px;"
							color="#cfcece" size="23"></u-icon>
					</view>
				</view>
				<view class="bigbox">
					<view style="width: 80%; height: 30px;">
						<input :placeholder="placeholder" placeholder-style="font-size:13px; " v-model="keyword"
							class="ipt" />
					</view>
					<view class="srhipt" @click="searchClick(keyword)">
						<view>搜索</view>
					</view>
				</view>

			</view>
		</view>
		<view class="flex-col list" v-if="vipList">
			<view class="flex-row justify-between items-center list-item" :key="i" v-for="(item, i) in vipList">
				<view class="flex-row items-center space-x-21" @click="vipdetail(item)">
					<image class="image_7" style="border-radius: 50%;" :src="item.f_headimgurl" />
					<view class="flex-col items-start space-y-29">
						<text class="font_2"
							style="width: 53px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{item.f_nickName}}</text>
						<text class="font_3">{{item.f_phone}}</text>
					</view>
				</view>
				<view class="flex-row space-x-27">
					<view class="flex-col space-y-24" @click="vipdetail(item)">
						<view class="flex-row space-x-10">
							<image class="image_8"
								src="https://gongxiangtaiqiu.axa2.com/taiqiu/16778261284925764361.png" />
							<text class="font_2 text_5">余额{{item.f_account_balance?item.f_account_balance:'0'}}</text>
						</view>
						<text class="font_1 text_6">{{item.shopName}}</text>
					</view>
					<view class="flex-row space-x-24">
						<button class="btnn" @click="givefree(item)">赠送台费</button>
					</view>
				</view>
			</view>
		</view>
		<u-modal v-model="show" title="赠送台费" confirm-text="确认" confirm-color="#19C865" :title-style="{color:'black'}"
			@confirm="confirm" :mask-close-able="true">
			<view class="slot-content">
				<view style="display: flex; align-items: center; width: 270px; height: 72px;">
					<view>赠送金额：</view><input class="time" v-model="money" />
				</view>
			</view>
		</u-modal>
		<!-- 搜索不到时候 -->
		<view class="vip" v-if="vipList==''">
			<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/nonevip.png" style="width: 100%; height: 100%;">
			</image>
			<view style="width: 100%; height: 20px;">
				<view class="vip-p">没有该会员</view>
			</view>
		</view>
		<view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				placeholder: '请选择筛选方式',
				dafautValue: [0],
				mode: 'single-column',
				slideShow: false, // 业务员，
				salesmantext: "", // 选择业务员
				Params: {
					manage_id: '', //业务员ID
				},
				salesList: [{
						value: '1',
						label: '手机号筛选'
					},
					{
						value: '2',
						label: '昵称筛选'
					}
				], // 选择业务员  
				keyword: '',
				show: false,
				background: '#19c865',
				shop_name: uni.getStorageSync('Bshop_name'),
				vipList: {},
				telList: [],
				money: '',
				userId: '',
				loadstatus: 'more',
				isRefresh: 0,
				page: 1,

			};
		},
		// onShow() {
		// 	this.page = 1;
		// 	this.getvip()
		// },
		onLoad() {
			if (uni.getStorageSync('Bshop_name') == '') {
				uni.showToast({
					icon: 'none',
					title: '请在首页选择店铺哦！'
				})
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			}
			this.page = 1;
			this.isRefresh = 1;
			this.getvip()
		},
		onPullDownRefresh() {
			this.isRefresh = 1;
			this.loadstatus = 'more';
			this.page = 1;
			this.getvip()
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.loadstatus !== 'more') {
				return;
			}
			this.loadstatus = '加载中...';
			this.isRefresh = 0;
			this.getvip()
		},
		methods: {

			// 选择弹窗 业务员
			async selectarea(status) {
				this.slideShow = true;
			},
			// 选择弹窗，选择结果
			selectTrue(e) {
				console.log(e)
				this.Params.manage_id = e[0].value
				this.salesmantext = e[0].label
				this.dafautValue = [this.salesList.findIndex(item => item.value === e[0].value)] || [0]
				// this.getmorePage() // 搜索的列表项；
				if (this.Params.manage_id == 1) {
					this.placeholder = '请输入手机号码'
				} else if (this.Params.manage_id == 2) {
					this.placeholder = '请输入昵称'
				}
				console.log(this.Params.manage_id, this.salesmantext, this.dafautValue)
			},
			givefree(item) {
				console.log(item)
				this.show = true
				this.userId = item.id
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				if (this.money == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入金额'
					})
					return
				}
				this.$Api.giftMoney({
					userId: this.userId,
					money: this.money,
					shopId: uni.getStorageSync('Bshop_id'),
					// shopId: 32,
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '赠予该用户成功'
						})
					}
					this.money = '';
					this.getvip()
				});
			},
			//获取会员列表
			getvip() {
				this.$Api.visitorList({
					pageNum: 15,
					page: this.page,
					shopId: uni.getStorageSync('Bshop_id'),
					// shopId: 61,
				}).then(res => {
					console.log(res, '数据列表')
					// this.vipList = res.data.data.list
					if (res.data.data.list.length > 0) {
						if (this.isRefresh) {
							this.vipList = res.data.data.list;
						} else {
							this.vipList = this.vipList.concat(res.data.data.list);
						}
						if (res.data.data.list.length != 15) {
							this.loadstatus = '到底了...';
						} else {
							this.loadstatus = 'more';
							this.page++;
						}
					} else {
						this.loadstatus = '到底了...';
					}
				}, err => {})

			},
			clear() {
				this.getvip()
			},
			searchClick(val) {
				if (this.Params.manage_id == '') {
					uni.showToast({
						icon: 'none',
						title: '请选择上方筛选方式再搜索'
					})
					return
				}
				if (this.Params.manage_id == 1) {
					this.$Api.visitorList({
						pageNum: 15,
						page: 1,
						shopId: uni.getStorageSync('Bshop_id'),
						// shopId: 61,
						phone: val,
					}).then(res => {
						this.vipList = res.data.data.list
						console.log(res.data.data.count, '手机号列表')
					});
				} else if (this.Params.manage_id == 2) {
					this.$Api.visitorList({
						pageNum: 15,
						page: 1,
						shopId: uni.getStorageSync('Bshop_id'),
						// shopId: 61,
						name: val
					}).then(res => {
						this.vipList = res.data.data.list
						console.log(res.data.data.count, 'name列表')
					});
				}


			},
			vipdetail(item) {
				uni.navigateTo({
					url: '/pagesB/memberDetails/memberDetails?id=' + item.id
				})
			}
		},
	};
</script>

<style>
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/

	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.bigbox {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.srhipt {
		width: 65px;
		height: 30px;
		background-color: #19C865;
		color: aliceblue;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 7px;
	}

	.ipt {
		width: 90%;
		height: 28px;
		border-radius: 20px;
		margin: auto;
		border: 1px solid #eeeeee;
		padding-left: 15px;
	}

	.time {
		border: 1px solid #dddddd;
		border-radius: 8rpx;
		width: 198rpx;
		height: 80rpx;
		padding-left: 20rpx;
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		padding-left: 30rpx;
	}

	.btnn {
		height: 24px;
		background: #19C865;
		border-radius: 4px;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
	}

	.vip {
		width: 178rpx;
		height: 181rpx;
		margin: auto;
		margin-top: 200rpx;
	}

	.vip-p {
		/* width: 250rpx; */
		height: 28rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
		margin: auto;
		margin-top: 20rpx;
	}

	::v-deep .u-navbar-fixed {
		position: relative !important;
		background-color: #19c865 !important;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.group_2 {
		padding-bottom: 259rpx;
		overflow-y: auto;
	}

	.section_2 {
		padding: 35rpx 31rpx 76rpx;
		background-color: #19c865;

	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 31rpx;
	}

	.space-x-7>view:not(:first-child),
	.space-x-7>text:not(:first-child),
	.space-x-7>image:not(:first-child) {
		margin-left: 7rpx;
	}

	.font_1 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 24rpx;
		font-weight: 500;
		color: #6b6b6b;
	}

	.text_3 {
		color: #ffffff;
		font-weight: 700;
		line-height: 23rpx;
	}

	.image_5 {
		width: 24rpx;
		height: 22rpx;
	}

	.section_3 {
		margin-top: -37rpx;
		padding: 30rpx 0;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0px 0px;
	}

	.search {
		margin: 0 30rpx;
		padding: 15rpx 29rpx 10rpx;
		border-radius: 32rpx;
		border: solid 1rpx #dddddd;
	}

	.space-x-19>view:not(:first-child),
	.space-x-19>text:not(:first-child),
	.space-x-19>image:not(:first-child) {
		margin-left: 19rpx;
	}

	.image_6 {
		width: 37rpx;
		height: 37rpx;
	}

	.text_4 {
		color: #b8b8b8;
		line-height: 23rpx;
	}

	.list {
		margin-top: 19rpx;
	}

	.list-item {
		padding: 36rpx 32rpx;
		background-color: #ffffff;
	}

	.space-x-21>view:not(:first-child),
	.space-x-21>text:not(:first-child),
	.space-x-21>image:not(:first-child) {
		margin-left: 21rpx;
	}

	.image_7 {
		width: 88rpx;
		height: 88rpx;
	}

	.space-y-29>view:not(:first-child),
	.space-y-29>text:not(:first-child),
	.space-y-29>image:not(:first-child) {
		margin-top: 29rpx;
	}

	.font_2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 24rpx;
		font-weight: 500;
		color: #222222;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 19rpx;
		font-weight: 500;
		color: #6b6b6b;
	}

	.space-x-27>view:not(:first-child),
	.space-x-27>text:not(:first-child),
	.space-x-27>image:not(:first-child) {
		margin-left: 33rpx;
	}

	.space-y-24>view:not(:first-child),
	.space-y-24>text:not(:first-child),
	.space-y-24>image:not(:first-child) {
		margin-top: 24rpx;
	}

	.space-x-10>view:not(:first-child),
	.space-x-10>text:not(:first-child),
	.space-x-10>image:not(:first-child) {
		margin-left: 10rpx;
	}

	.image_8 {
		width: 25rpx;
		height: 25rpx;
	}

	.text_5 {
		line-height: 25rpx;
	}

	.text_6 {
		margin-left: 3rpx;
		line-height: 23rpx;
	}

	.image_9 {
		width: 28rpx;
		height: 24rpx;
	}
</style>